import { Component, EventEmitter } from '@angular/core';
import { TableHeader } from "./../interface-shared"

@Component({
  selector: 'table-scroll',
  templateUrl: 'table-scroll.component.html',
  styleUrls: ['table-scroll.component.less'],
  inputs: ['header', 'data', 'classify', 'clickedKey', 'trHighLight', 'tdClickedKey', 'titleAtRight'],
  outputs: ['toggleChart', 'toggleDoughnutChart']
})

export class TableScrollComponent {
  toggleChart = new EventEmitter<TableHeader>()
  toggleDoughnutChart = new EventEmitter<string>()
  clickedKey: string;
  tdClickedKey: string;
  trHighLight: boolean = false;
  constructor () {}

  toggleType (payload) {
    if (!payload.clickEmitter) return
    this.clickedKey = payload.key
    this.toggleChart.emit(payload)
  }

  toggleTime (payload, data, index) {
    if (!payload.clickEmitter) return
    let time = data.endDate
    this.toggleDoughnutChart.emit(time)
  }

  trackByHeader (index: number, header: TableHeader) {
    return header.key;
  }

  trackByItem (index: number, item: any) {
    return item.ID || index;
  }

  trActived (header) {
    return this.trHighLight && header.clickEmitter && header.key === this.clickedKey
  }

  tdActived (header, tdContent) {
    return !this.trHighLight && header.clickEmitter && tdContent === this.tdClickedKey
  }
}